/**
* 支付管理 支付配置
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">诊所管理</el-breadcrumb-item>
      <el-breadcrumb-item>近7日配置</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" :model="searchForm" style="margin-top: 30px;">
      <el-form-item label="搜索：">
        <el-select style="font-size: 22px" v-model="searchForm.date" @change="selectUpdateForm" placeholder="请选择日期">
          <el-option
            v-for="(item,index) in workDayList"
            :key="index"
            :label="item.date"
            :value="item.date">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :header-cell-style="{fontSize: '16px'}" :cell-style="{fontSize: '20px'}" size="medium" :data="workDayList[workDayListIndex].timeSlots" ref="multipleTable" @selection-change="handleSelection" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;margin-top: 20px">
      <el-table-column align="center" type="selection" width="50">
      </el-table-column>
      <el-table-column  label="ID" width="100">
        <template slot-scope="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column prop="timeSlot" label="时间段">
      </el-table-column>
      <el-table-column prop="number" label="剩余数量">
      </el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="scope">
          <el-tag style="font-size: 16px" v-if="scope.row.state === 0">休息</el-tag>
          <el-tag style="font-size: 16px"  v-if="scope.row.state === 1" type="success">工作</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态操作" width="230">
        <template slot-scope="scope">
          <i v-if="scope.row.refreshFlag" style="cursor:pointer;" class="el-icon-refresh" @click="refreshBtn(scope.row.id, scope.row.state)"></i>
          <el-tag v-else type="danger">该时间段已被预约</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ConfigList, ConfigSave, ConfigDelete } from '../../api/payMG'
import Pagination from '../../components/Pagination'
import {
  addTimeSlot,
  checkAllWorkDay,
  delTimeSlot,
  getAllTimeSlot,
  getSevenTimeSlot,
  restWorkDay,
  updateTimeSlot, updateTimeSlotQueue
} from "../../api";
export default {
  data() {
    return {
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      addFormVisible: false,
      searchForm: {},
      workDayList: [],
      workDayListIndex: 0,
      timeSlotList: [],
      tbTimeSlotList: [],
      title: '',
      editForm: {},
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    let _this = this
    this.getData()
    setTimeout(() => {
      _this.searchForm = JSON.parse(JSON.stringify(_this.workDayList[0]))
    }, 1500)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    selectUpdateForm: function (event) {
      for(let i = 0; i < this.workDayList.length; i++) {
        if (this.workDayList[i].date === event) {
          this.workDayListIndex = i
        }
      }
    },
    getData: function () {
      let _this = this
      this.getTimeSlotData()
      setTimeout(() => {
        getSevenTimeSlot()
          .then(res => {
            _this.workDayList = res.result
            for (let i = 0; i < 7; i++) {
              for (let j = 0; j < _this.workDayList[i].timeSlots.length; j++) {
                _this.workDayList[i].timeSlots[j].refreshFlag = true
                for(let k = 0; k < _this.tbTimeSlotList.length; k++) {
                  if (_this.workDayList[i].timeSlots[j].id === _this.tbTimeSlotList[k].id && _this.workDayList[i].timeSlots[j].number < _this.tbTimeSlotList[k].number) {
                    _this.workDayList[i].timeSlots[j].refreshFlag = false
                  }
                }
              }
            }
            for (let i = 0; i < _this.workDayList.length; i++) {
              _this.workDayList[i].date = _this.workDayList[i].date.substr(0,10)
            }
          })
          .catch(err => {

          })
      },500)

    },
    handleSelection: function () {
      this.checkMultipleTable = this.$refs.multipleTable.selection
    },
    getTimeSlotData: function () {
      getAllTimeSlot()
        .then(res => {
          this.tbTimeSlotList = res.result
        })
        .catch(err => {

        })
    },
    closeDialog: function () {
      this.editFormVisible = false
      this.addFormVisible = false
    },
    // refreshFlag: function (id, number) {
    //   let _this = this
    //   console.log(id)
    //   for (let i = 0; i < _this.tbTimeSlotList.length; i++) {
    //     if (_this.tbTimeSlotList[i].id === id && _this.tbTimeSlotList[i].number === number)
    //       return true
    //     else
    //       return false
    //   }
    // },
    refreshBtn: function (id, state) {
      let _this = this
      let updateState
      if (state === 0)
        updateState = 1
      else if (state === 1)
        updateState = 0
      let params = new URLSearchParams()
      params.append('dateStr', _this.searchForm.date)
      params.append('state', updateState)
      params.append('timeSlotId', id)
      updateTimeSlotQueue(params)
      .then(res => {
        if (res.result) {
          _this.getData()
        }
      })
      .catch(err => {

      })
    }
  },
  filters: {
    spliceDate: function (value) {
      return value.substr(0,10)
    },
    spliceWeek: function (value) {
      return value.substr(2,2)
    },
    timeToString: function (value) {
      let result
      if (value === 0) {
        result = "上"
      } else if (value === 1) {
        result = "下"
      }
      return result
    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
  color: #276ad2;
}
.box{
  margin-top: 20px;
  width: 440px;
  height: 110px;
  padding: 20px 25px 20px 25px;
  background-color: #f6f6f6;
  box-shadow: 0px 0px 8px 3px rgba(0,0,0,.1);
  border-radius: 5px;
}
.container {
  writing-mode: vertical-lr;
  /* 内容从上到下垂直排列，下一垂直行位于上一行右侧 */
  height: 120px;
  /* 必须控制容器高度，宽度自适应 */
  font-size: 0;
  /* 子元素为行内块元素，需要设置父元素font-size为0，否则子元素会有间隙 */
  margin: 0;
  padding: 0;
}

.container li {
  display: inline-block;
  /*必须设置为行内块，否则会水平排列*/
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color: #FFF;
  box-shadow: 0px 0px 10px 2px rgba(50, 50, 50, 0.1);
  text-align: center;
  line-height: 50px;
  writing-mode: horizontal-tb;
  /* 这里必须改成水平，否则文字显示方向不对*/
  margin: 0 15px 10px 0;
  color: #000;
  font-size: 18px;
  cursor: pointer;
  transition: all .25s;
  /* 必须重设字体大小,否则font-size为0 */
}

.flex {
  display: flex;
  flex-direction: column;
  background-color: pink;
  margin: 50px 0 0;
  padding: 0;
  height: 180px; /* 必须设置高度, 否则就垂直一列排完了 */
  flex-wrap: wrap;
  width: 330px; /* (100+10)*3  需要设置容器宽度, 否则子元素与子元素水平防线的间距不对(对间距无要求可忽略) */
}

.flex li {
  width: 100px;
  height: 50px;
  background-color: #FFF;
  text-align: center;
  line-height: 50px;
  margin: 0  0 10px 0; /* margin-left,margin-right设置无效*/
  color: #000;
  font-size: 40px;
  list-style: none;
}
.el-icon-refresh:hover{
  color: #3a8ee6;
  transition: all 0.25s;
}
</style>


